<template>
  <div>
    <searchBar placeHolder='请输入车主姓名'
               @handleSearch='init' />
    <el-table :data="tableData">
      <el-table-column align="center"
                       label="订单编号"
                       prop="odd_number">
      </el-table-column>
      <el-table-column align="center"
                       label="联系电话"
                       prop="phone">
      </el-table-column>
      <el-table-column align="center"
                       label="提现金额"
                       prop="money">
      </el-table-column>
      <el-table-column align="center"
                       label="申请时间"
                       prop="create_time">

      </el-table-column>
      <el-table-column align="center"
                       label="详情">
        <template slot-scope="scope">
          <el-popover placement="right"
                      width="350"
                      trigger="click">
            <el-button type="text"
                       slot="reference"
                       @click="details(scope.row.uid)">详情</el-button>
            <div v-if="detailsList"
                 class="details">
              <div class="head_pic">

                <img :src="detailsList.head_pic">

              </div>
              <div>
                <span>开户名:</span>
                <span>{{detailsList.account_name}}</span>
              </div>
              <div>
                <span>开户行:</span>
                <span>{{detailsList.bank_name}}</span>
              </div>
              <div>
                <span>开户分行:</span>
                <span>{{detailsList.branch}}</span>
              </div>
              <div>
                <span>提现账号:</span>
                <span>{{detailsList.account}}</span>
              </div>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="收入明细">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="dialog.incomeVisible=true,unionId=scope.row.unionId,income(scope.row.unionId)">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="提现记录">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="dialog.withdrawalVisible=true,unionId=scope.row.unionId,withdrawal(scope.row.unionId)">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="small"
                     @click="adopt(scope.row)">通过</el-button>

          <el-popover placement="bottom"
                      width="160"
                      v-model="rejected[scope.$index]">

            <el-button slot="reference"
                       type="warning"
                       size="small"
                       @click="rejected[scope.$index]=true">驳回</el-button>
            <el-input type="textarea"
                      :autosize="{ minRows: 4, maxRows: 6}"
                      placeholder="请输入驳回理由"
                      v-model="reason[scope.$index]">
            </el-input>
            <el-button type="primary"
                       style="margin:10px 0"
                       size="mini"
                       @click='Reject(scope.row,scope.$index)'>驳回</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!-- 收入明细详情 -->
    <v-dialog :show.sync='dialog.incomeVisible'
              title='收入明细'>
      <el-table :data="incomedetails.tableData">
        <el-table-column align="center"
                         label="被推荐者"
                         prop="company">
        </el-table-column>
        <el-table-column align="center"
                         label="金额"
                         prop="money">

        </el-table-column>
        <el-table-column align="center"
                         label="类型"
                         prop="type">
        </el-table-column>
      </el-table>
      <v-pagination :total='incomedetails.total'
                    :page.sync='incomedetails.page'
                    @pagination='income' />
    </v-dialog>
    <!-- 提现记录详情 -->
    <v-dialog :show.sync='dialog.withdrawalVisible'
              title='提现记录'>
      <el-table :data="withdrawaldetails.tableData">
        <el-table-column align="center"
                         label="订单编号"
                         prop="odd_number">

        </el-table-column>
        <el-table-column align="center"
                         label="提现金额"
                         prop="money">

        </el-table-column>
        <el-table-column align="center"
                         label="申请时间"
                         prop="create_time">

        </el-table-column>
        <el-table-column align="center"
                         label="通过时间"
                         prop="audit_time">

        </el-table-column>
        <el-table-column align="center"
                         label="审核人"
                         prop="audit_person">

        </el-table-column>
      </el-table>
      <v-pagination :total='withdrawaldetails.total'
                    :page.sync='withdrawaldetails.page'
                    @pagination='withdrawal' />
    </v-dialog>
    <!-- 分页 -->
    <v-pagination :total='total'
                  :page.sync='page'
                  @pagination='init' />
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      total: 0, //总页数
      page: 1,//当前页 
      detailsList: {},
      unionId: '',
      dialog: {
        incomeVisible: false,
        withdrawalVisible: false
      },
      incomedetails: {  //收入明细详情
        tableData: [],
        page: 1,
        total: 0
      },
      withdrawaldetails: { //提现记录详情
        tableData: [],
        page: 1,
        total: 0
      },
      rejected: [],
      reason: [] //驳回理由
    }
  },
  methods: {
    async init (data) {
      try {
        const res = await this.api.applyList(Object.assign({}, data, { page: this.page, key: data && data.search }))
        this.tableData = res.data.list || []
        this.total = res.data.rows || 0
      } catch (err) {
        console.log(err)
        this.$message.error('接口报错,请联系管理员')
      }
    },
    async details (uid) {
      try {
        const res = await this.api.getUserInfo({ uid: uid })  //uid 车主id
        this.detailsList = res.data || {}
      } catch (err) {
        this.$message.error('接口报错,请联系管理员')
      }
    },
    async income () {  //收入明细
      try {
        const res = await this.api.incomeDetails({ unionId: this.unionId, page: this.incomedetails.page })  //unionId 用户的unionId
        this.incomedetails.tableData = res.data.list || []
        this.incomedetails.total = res.data.rows || 0
      } catch (err) {
        this.$message.error('接口报错,请联系管理员')
      }
    },
    async withdrawal () { //提现记录
      try {
        const res = await this.api.presentationDetails({ unionId: this.unionId, page: this.withdrawaldetails.page })  //unionId 用户的unionId
        this.withdrawaldetails.tableData = res.data.list || []
        this.withdrawaldetails.total = res.data.rows || 0
      } catch (err) {
        this.$message.error('接口报错,请联系管理员')
      }
    },
    async adopt (row) {  //通过
      try {
        const res = await this.api.adoptPost({ id: row.id, phone: row.phone, unionId: row.unionId, name: row.name })
        if (res.code == 1) {
          this.$message({ message: res.msg, type: 'success' })
          this.init()
        } else {
          this.$message.error(res.msg)
        }

      } catch (err) {
        this.$message.error('出错了,请联系管理员')
      }
    },
    async Reject (row, index) { //驳回
      if (!this.reason[index]) {
        this.$message.error('请输入驳回理由')
        return;
      }
      try {
        const res = await this.api.rejectPost(   //id 申请id  phone 联系电话 unionId 车主的unionId  name 车主姓名  reason 驳回理由 money 提现金额  create_time 申请时间
          {
            id: row.id, phone: row.phone, unionId: row.unionId, name: row.name, reason: this.reason[index], money: row.money, create_time: row.create_time
          }
        )
        if (res.code == 1) {
          this.$message({ message: res.msg, type: 'success' })
          this.rejected[index] = false
          this.init()
        } else {
          this.$message.error(res.msg)
        }

      } catch (err) {
        this.$message.error('出错了,请联系管理员')
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped lang='scss'>
.details {
  margin-top: 20px;
  & > div {
    margin: 10px 0;
    & > span {
      display: inline-block;
      width: 50%;
    }
  }
}

.details > div > span:last-child {
  text-align: right;
}
.head_pic {
  text-align: center;
}
.head_pic img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: middle;
}
</style>
